import React from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import avatar from '../images/avatar.jpeg'; // 导入图片

export class CommentList extends React.Component {
  render() {
    return (
      <div className="comment-list">
        {this.props.list.map((item) => {
          return (
            <div className="comment-item" key={item.id}>
              <div>
                <img className="user-head" src={avatar} alt="头像" />
              </div>

              <div className="comment">
                {/* 评论人 */}
                <div className="user">{item.author}</div>
                {/* 评论内容 */}
                <p className="text">{item.comment}</p>
                <div className="info">
                  <span className="time">
                    {/* {item.time.toLocaleDateString()} */}
                    {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                  </span>
                  <span
                    // className={item.attitude === 1 ? 'like liked' : 'like'}
                    className={classNames('like', {
                      liked: item.attitude === 1,
                    })}
                    onClick={() => {
                      return this.props.changeAttitude(
                        item.id,
                        item.attitude === 1 ? 0 : 1
                      );
                    }}
                  >
                    <i className="icon" />
                  </span>
                  <span
                    // className={item.attitude === -1 ? 'hate hated' : 'hate'}
                    className={classNames('hate', {
                      hated: item.attitude === -1,
                    })}
                    onClick={() => {
                      return this.props.changeAttitude(
                        item.id,
                        item.attitude === -1 ? 0 : -1
                      );
                    }}
                  >
                    <i className="icon" />
                  </span>
                  <span
                    className="btn-hover"
                    onClick={(e) => {
                      return this.props.delComment(e, item.id);
                    }}
                  >
                    删除
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}
